<template>
    <div class="wrap">
        <div class="container">
            <TopBreadCrumb></TopBreadCrumb>
            <div class="user_center_content">
                <!-- 左侧菜单 -->
                <LeftNavMenu></LeftNavMenu>
                <!-- 左侧菜单结束 -->
                <!-- 右侧内容开始  -->
                <div class="right_user_content">
                    <div class="right-title">
                        <div class="left">价格备案</div>
                    </div>
                    <div class="price-content">
                        <div class="price-head">
                            <div>商品信息</div>
                            <div>产品类别</div>
                            <div class="remark">备注</div>
                            <div class="submenu">
                                <el-menu :default-active="activeIndex" class="el-menu-sccj" mode="horizontal" @select="handleSelect">
                                    <el-submenu index="1">
                                        <template slot="title">生产厂家</template>
                                        <el-menu-item index="1-0">全部</el-menu-item>
                                        <el-menu-item :index="'1-' + item.id" v-for="(item, index) in factoryList" :key="index">{{ item.name }}</el-menu-item>
                                    </el-submenu>
                                </el-menu>
                            </div>
                            <div class="record-price">价格备案</div>
                        </div>
                        <div class="price-list" v-for="(item,index) in filingsList.data" :key="index">
                            <div class="price-goods-info">
                                <div class="goods-img">
                                    <img src="@/assets/images/img.png">
                                </div>
                                <div class="goods-info">
                                    <div class="goods-name">{{item.goods.goods_title}}</div>
                                    <div>型号：{{ item.goods.goods_models }}</div>
                                    <div class="goods-guige"><span>规格：</span><span>{{ item.sku_name }}</span></div>
                                </div>
                            </div>
                            <div>{{item.goods.category.name}}</div>
                            <div class="remark">{{item.goods.remark}}</div>
                            <div class="manufacturer">{{item.goods.factory.name}}</div>
                            <div class="record-price">￥{{item.price}}</div>
                        </div>    
                        <Custom-pagination :total="filingsList.total" :page.sync="query.page" :pageSize.sync="query.pageSize" @pagination="LoadFilingsData" :hidden="pageHidden"></Custom-pagination>
                    </div>
                </div>
                <!-- 右侧内容结束 -->
            </div>
        </div>
    </div>
</template>

<script>
import api from "@/api/filings";
import factoryApi from "@/api/factory";
export default {
    data() {
        return {
            filingsList: {
                total: 0,
                data: []
            },
            factoryList: [],
            query: {
                page: 1,
                pageSize: 10,
                factory_id: null
            },
            pageHidden: true,
            activeIndex: "1-0"
        };
    },
    methods: {
        // 加载备案信息
        LoadFilingsData: function () {
            var _this = this;
            api.GetFilingPageList(_this.query)
                .then((res) => {
                    _this.filingsList = res.data;
                    this.pageHidden = false;
                    if (_this.query.pageSize >= _this.filingsList.total) {
                        _this.pageHidden = true;
                    }
                })
        },
        // 加载生产厂家
        LoadFactoryPageList: function () {
            var _this = this;
            factoryApi.GetFactoryList({})
                .then((res) => {
                    _this.factoryList = res.data;
                })
        },
        // 选中菜单的回调
        handleSelect(index, indexPath) {
            console.log(index);
            if (index == "1-0") {
                this.query.factory_id = null
            } else {
                this.query.factory_id = Number(index.split("-")[1])
            }
            this.LoadFilingsData();
        }
    },
    mounted: function () {
        this.LoadFilingsData();
        this.LoadFactoryPageList();
    }
};
</script>
<style>
    .el-menu--horizontal>.el-submenu .el-submenu__title{
        color: #333333;
        font-size: 0.16rem;
    }
    .el-menu--popup-bottom-start{
        margin-top: 0;
    }
    .el-menu--popup{
        border-radius: 5px;
        padding:10px 15px;
    }
    .el-menu--horizontal>.el-submenu:focus .el-submenu__title, .el-menu--horizontal>.el-submenu:hover .el-submenu__title,
    .el-menu--horizontal>.el-submenu.is-opened .el-submenu__title, .el-menu--horizontal>.el-submenu.is-opened .el-submenu__title i,
    .el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover{
        color: #017CBA;
    }
    .el-menu.el-menu--horizontal,
    .el-menu--horizontal>.el-submenu.is-active .el-submenu__title{
        border-bottom: 0;
    }
    .el-dropdown-menu__item, .el-menu-item{
        font-size: 0.15rem;
    }
    .el-submenu__icon-arrow{
        font-size: 0.16rem;
    }
</style>